<template>
	<view class="search">
		<musicHead title='搜索' :icon="true"style="color: black;"/>
		<view class="container">
			<scroll-view scroll-y="true" >
				<view class="search-bar">
					<text class="iconfont icon-fangdajing"></text>
					<input type="text" placeholder="搜索歌曲" v-model="inputValue" @confirm="confirm(inputValue)" @input="handleToSuggest">
					<text class="iconfont" @click="inputOperation">x</text>
				</view>
				<!-- --------搜索推荐-------- -->
				<block v-if="inputValueNumber == 1">
					<view class="history" >
						<view class="history-head">
							<text>历史记录</text>
							<text class="iconfont icon-icon"  @click="delAll">删除所有</text>
						</view>
						<view class="history-list">
							<view v-for="item in historyList" @click="sendSuggestMsg(item)">{{item}}<text class="iconfont icon-icon" @click.stop="del(item)"></text></view>
						</view>
					</view>
					<view class="search-hot">
						<view class="search-hot-head">
							热搜榜
						</view>
						<view class="search-hot-list">
							<view class="search-hot-list-item" v-for="(item, index) in searchHotList" :key="index" @click="toSearch(item.searchWord)">
								<view class="hot-list-item-index">
									{{index}}
								</view>
								<view class="hot-list-item-inFO">
									<view class="item-inFO-name">
										{{item.searchWord}}
									</view>
									<view class="item-inFO-content" v-if="item.content != ''">
										{{item.content}}
									</view>
								</view>
								<view class="hot-list-item-people">
									{{item.score}}
								</view>
							</view>
						</view>
					</view>
				</block>
				<!-- --------搜索结果列表-------- -->
				<block  v-else-if="inputValueNumber == 2">
					<view class="result-list">
						<view class="result-list-item" v-for="item in searchList" :key="item.id" @click="toPlayerMusic(item.id)">
							<view class="item-inFo">
								<view class="item-inFo-name">
									{{item.name}}
								</view>
								<view class="item-inFo-msg">
									<text v-for="item01 in item.ar">{{item01.name}}</text>
									<text v-if="item.al.name">-{{item.al.name}}</text>
								</view>
							</view>
							<view class="item-icon">
								<text class="iconfont icon-bofang_o"></text>
							</view>
						</view>
					</view>
				</block>
				<!-- --------搜索建议--------- -->
				<block v-else-if="inputValueNumber == 3">
					<view class="search-suggest">
						<view class="suggest-head">
							搜索“{{searchSuggestInfo}}”
						</view>
						<view class="suggest-list">
							<view class="suggest-list-item" v-for="(item, index) in searchSuggestList" :key="index" @click="sendSuggestMsg(item.keyword)">
								<text class="iconfont icon-fangdajing"></text>
								{{item.keyword}}
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import'@/common/iconfont.css'
	import musicHead from "../../components/MusicHead/MusicHead.vue"
	import {searchHot,search,searchSuggest} from "../../common/api.js"
	export default {
		data() {
			return {
				searchHotList:[],
				inputValue:'',
				historyList:[],
				inputValueNumber:1,
				searchList:[],
				searchSuggestList:[],
				searchSuggestInfo:''
			}
		},
		methods: {
			
		},
		onLoad() {
			// 网络请求，获取榜单数据
			searchHot().then((res) => {
				this.searchHotList = res
			});
			// 向本地存储搜索记录
			uni.getStorage({
				key:'searchHistory',
				success:(res) =>{
					this.historyList = res.data
				}
			})
		},
		methods: {
			// 点击input框里的x清空input框
			inputOperation(){
				this.inputValueNumber = 1
				this.inputValue = ''
			},
			// 点击热门搜索列表将列表项信息转给input框
			toSearch(value){
				this.inputValueNumber = 2
				this.inputValue = value
				this.historyList.unshift(value)
				this.historyList = [...new Set(this.historyList)]
				if(this.historyList.length >= 11){
					 this.historyList.pop()
				}
				uni.setStorage({
					key:'searchHistory',
					data: this.historyList
				})
				// 存储历史记录
				this.getSearchList(value)
			},
			// 在点击确定（回车）后显示搜索列表
			confirm(value) {
				this.inputValueNumber = 2
			    this.historyList.unshift(value)
				this.historyList = [...new Set(this.historyList)]
				 if(this.historyList.length >= 11){
					 this.historyList.pop()
				 }
				 uni.setStorage({
				 	key:'searchHistory',
					data: this.historyList
				 })
				 // 存储历史记录
				 this.getSearchList(value)
			},
			// 删除点个搜索信息
			del(value){
				this.historyList = this.historyList.filter(val =>{
					return val !== value
				})
				uni.setStorage({
					key:'searchHistory',
					data: this.historyList
				})
			},
			// 删除所有搜索过信息
			delAll(){
				this.historyList = []
				uni.setStorage({
					key:'searchHistory',
					data: this.historyList
				})
			},
			// 请求搜索列表
			getSearchList(value){
				search(value).then((res) => {
					this.searchList = res
				});
			},
			// 跳转到音乐播放页面
			toPlayerMusic(id){
				uni.reLaunch({
					url:'../playerMusic/playerMusic?id=' + id
				})
			},
			// 显示建议框
			handleToSuggest(ev){
				let value = ev.detail.value
				this.inputValueNumber = 3
				if(!value){
					this.inputValueNumber = 1
				}
				this.searchSuggestInfo = value
				searchSuggest(value).then((res) => {
					this.searchSuggestList = res
				});
			},
			// 实现点击建议列表的列表项将数据转到input框
			sendSuggestMsg(value){
				this.confirm(value)
				this.inputValue = value
			}
		},
		components:{musicHead}
	}
</script>

<style scoped>
.container{width: 100%;height: calc(100vh - 75px);overflow: hidden;}	
.container scroll-view{height: 100%;}
.search-bar{display: flex;align-items: center;height: 70rpx;margin: 20rpx 30rpx 30rpx 30rpx;background-color: #f7f7f7;border-radius: 50rpx;}
.search-bar input{font-size: 28rpx;flex: 1;}
.search-bar text{margin-left: 28rpx;font-size: 26rpx;margin-right: 26rpx;}
.history{margin: 0 30rpx;font-size: 26rpx;}
.history-head{display: flex;justify-content: space-between;margin-bottom: 36rpx;}
.history-list{display: flex;flex-wrap: wrap;}
.history-list view{padding: 16rpx 28rpx;border-radius: 40rpx;margin-bottom: 30rpx;margin-right: 30rpx;background-color:#f7f7f7;}
.history-list text{margin-left: 16rpx;}
.search-hot{width: 690rpx;margin: 30rpx auto;}
.search-hot-head{width: 100%;}
.search-hot-list-item{display: flex;justify-content: space-between;margin-top: 30rpx;width: 100%;height: 116rpx;}
.hot-list-item-index{height: 100%;line-height: 100rpx;width: 78rpx;margin-right: 12rpx;text-align: center;}
.hot-list-item-people{color:lightgray;}
.search-hot-list :nth-child(1) .hot-list-item-index{color: red;}
.search-hot-list :nth-child(2) .hot-list-item-index{color: red;}
.search-hot-list :nth-child(3) .hot-list-item-index{color: red;}
.hot-list-item-inFO{display: flex; flex-direction: column;width: 400rpx;}
.item-inFO-name{font-size: 40rpx;width: 70%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;margin-top: 24rpx;}
.item-inFO-content{font-size: 30rpx; color:darkgrey;width: 100%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.hot-list-item-people{height: 100%;line-height: 100rpx;width: 180rpx;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.result-list{width: 100%;margin-top: 20rpx;border-top: 2px solid #e4e4e4 ;}
.result-list-item{margin: 30rpx 30rpx; width: 690rpx;height: 100rpx;display: flex;justify-content: space-between;border-bottom: 2px solid #e4e4e4 ;}
.item-inFo{height: 100%;width: 500rpx;}
.item-inFo-name{font-size: 40rpx;color: royalblue;margin-bottom: 6rpx;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.item-inFo-msg{font-size: 25rpx;color: grey;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.item-icon{height: 100%; line-height: 100rpx;}
.item-icon text{font-size: 80rpx;color: lightgrey;}
.search-suggest{width: 690rpx;margin:10rpx 30rpx;border-top: 2px solid #e4e4e4;padding-top: 20rpx;}
.suggest-head{margin-bottom: 30rpx;color: cornflowerblue;}
.suggest-list{width: 100%;display: flex;flex-direction: column;}
.suggest-list-item{height: 80rpx;margin-bottom: 30rpx;line-height: 80rpx;font-size: 34rpx;}
.suggest-list-item text{margin-right: 20rpx;font-size: 40rpx;color: #e4e4e4;}
</style>
